<template>
  <div class="container">
    <div class="app-container">
      <el-button class="btn-add" size="mini" type="primary" @click="openDialog(1,0)">添加权限</el-button>
      <el-table :data="list" row-key="id">
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="code" label="标识" />
        <el-table-column prop="description" label="描述" />
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button size="mini" v-if="row.type===1" type="text" @click="openDialog(2,row.id)">添加</el-button>
            <el-button size="mini" @click="$refs.addPermForm.reviewData(row.id)" type="text">编辑</el-button>
            <el-button size="mini" type="text" @click="delRow(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <addPermForm ref="addPermForm" @updateList="initData" />
  </div>
</template>
<script>
import { delPermissionApi, getPermissionListApi } from '@/api/permission'
import { transListToTreeData } from '@/utils'
import addPermForm from './components/addPermForm.vue'
export default {
  name: 'Permission',
  components: {
    addPermForm,
  },
  data() {
    return {
      list: []
    }
  },
  created () {
    this.initData()
  },
  methods: {
    async initData() {
      let res = await getPermissionListApi()
      this.list = transListToTreeData(res,0)
    },
    // 打开弹框
    openDialog(type,pid){
      // type是权限的类型  1是页面权限， 2是按钮权限
      // pid 是父级id，  0 标识一级菜单   其他就是父级的id
      this.$refs.addPermForm.formData.pid = pid
      this.$refs.addPermForm.formData.type = type
      this.$refs.addPermForm.showDialog = true
    },
    // 删除行
    async delRow(id){
      await this.$confirm('确认删除吗?')
      await delPermissionApi(id)
      this.$message.success('删除成功')
      this.initData()
    }
  },
}
</script>
<style>
.btn-add {
  margin: 10px;
}
</style>